<template>
  <div class="printer" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="打印机设置" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="list_once margin_bottom padding_top">
      <div class="title">是否启用打印机</div>
      <van-switch v-model="checked" active-color="#FB4448" />
    </div>
    <div v-if="checked" class="list">
      <div class="list_once">
        <div class="title">打印机名称</div>
        <div class="content">
          <label>
            <input placeholder="填写相应打印机名称" value="" v-model="param[0].content"></input>
          </label>
        </div>
      </div>
      <div class="list_once">
        <div class="title">打印机类型</div>
        <div class="content">
          <label>
            <input placeholder="请选择打印机类型" value="" v-model="param[1].content"></input>
          </label>
        </div>
        <van-icon name="arrow" color="#999999" size="16" />
      </div>
      <div class="list_once margin_bottom">
        <div class="title">打印机语言</div>
        <div class="content">
          <label>
            <input name="" placeholder="简体中文" value="" v-model="param[2].content"></input>
          </label>
        </div>
        <van-icon name="arrow" color="#999999" size="16" />
      </div>
      <div class="list_once">
        <div class="title">USER</div>
        <div class="content">
          <label>
            <input name="" placeholder="填写相应打印机USER" value="" v-model="param[3].content"></input>
          </label>
        </div>
      </div>
      <div class="list_once">
        <div class="title">UKEY</div>
        <div class="content">
          <label>
            <input name="" placeholder="填写相应打印机UKEY" value="" v-model="param[4].content"></input>
          </label>
        </div>
      </div>
      <div class="list_once">
        <div class="title">打印机Key</div>
        <div class="content">
          <label>
            <input name="" placeholder="填写相应打印机ukey" value="" v-model="param[5].content"></input>
          </label>
        </div>
      </div>
      <div class="desc">
        <img src="../../../static/img/business/ts.png" alt="" />
        <span>以上口令需到相应打印机官网注册账号获取</span>
      </div>
      <div class="list_once">
        <div class="title">机器号</div>
        <div class="content">
          <label>
            <input name="" placeholder="打印机底部标签信息中获取" value="" v-model="param[6].content"></input>
          </label>
        </div>
      </div>
      <div class="list_once margin_bottom">
        <div class="title">打印机联数</div>
        <div class="content">
          <label>
            <input name="" placeholder="1" value="1" v-model="param[7].content"></input>
          </label>
        </div>
      </div>
      <div class="join">
        <div class="name">打印制定标签</div>
        <div class="content">
          <van-radio-group v-model="param[8].content" direction="horizontal">
            <van-radio name="1" icon-size="0.09rem"  checked-color="#FF0000">打印所有的商品</van-radio>
            <van-radio name="2" icon-size="0.09rem"  checked-color="#FF0000">打印指定标签</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="join">
        <div class="name">打印类型</div>
        <div class="content">
          <van-radio-group v-model="param[9].content" direction="horizontal">
            <van-radio name="1" icon-size="0.09rem"  checked-color="#FF0000">整单打印</van-radio>
            <van-radio name="2" icon-size="0.09rem"  checked-color="#FF0000">分单打印</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="join">
        <div class="name">商品名称文字大小</div>
        <div class="content">
          <van-radio-group v-model="param[10].content" direction="horizontal">
            <van-radio name="1" icon-size="0.09rem"  checked-color="#FF0000">小</van-radio>
            <van-radio name="2" icon-size="0.09rem"  checked-color="#FF0000">中</van-radio>
            <van-radio name="3" icon-size="0.09rem"  checked-color="#FF0000">大</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="join margin_bottom">
        <div class="name">订单备注文字大小</div>
        <div class="content">
          <van-radio-group v-model="param[11].content" direction="horizontal">
            <van-radio name="1" icon-size="0.09rem"  checked-color="#FF0000">小</van-radio>
            <van-radio name="2" icon-size="0.09rem"  checked-color="#FF0000">中</van-radio>
            <van-radio name="3" icon-size="0.09rem"  checked-color="#FF0000">大</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="inform">
        <div class="top">头部自定义信息</div>
        <div class="information">
          <span>自定义信息：</span>
          <label>
            <textarea placeholder="不多于20个字" v-model="param[12].content"></textarea>
          </label>
        </div>
      </div>
      <div class="inform margin_bottom">
        <div class="top">尾部自定义信息</div>
        <div class="information">
          <span>自定义信息：</span>
          <label>
            <textarea placeholder="不多于20个字" v-model="param[13].content"></textarea>
          </label>
        </div>
      </div>
      <div class="join joinTop">
        <div class="name">二维码类型</div>
        <div class="content">
          <van-radio-group v-model="param[14].content">
            <van-radio name="1" icon-size="0.09rem"  checked-color="#FF0000">配送员接单二维码</van-radio>
            <van-radio name="2" icon-size="0.09rem"  checked-color="#FF0000">自定义二维码链接</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>
    <div class="bg-color">
      <div class="save" @click="submit">保存</div>
    </div>
    <van-dialog v-model="show" :title="title" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button>
      <input class="dialog" :name="name" type="text" :placeholder="placeholder" />
    </van-dialog>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
  import myHead from "../../components/BusinessComponents/lib/myHead";
  import Vue from 'vue';
  import { Switch,Icon,Dialog,RadioGroup, Radio,ActionSheet } from 'vant';

  Vue.use(Switch);
  Vue.use(Icon);
  Vue.use(Dialog);
  Vue.use(RadioGroup);
  Vue.use(Radio);
  Vue.use(ActionSheet);

  export default {
      name: "printer",
      components: {
        myHead
      },
      data() {
        return {
          id:1,
          radio: '1',
          checked: true,
          show: false,
          name:"",
          title:"",
          placeholder:"",
          actions: [],
          param:[{
            "title":"打印机名称",
            "content":"袁家打印机"
          },{
            "title":"打印机类型",
            "content":"飞鹅打印机"
          },{
            "title":"打印机语言",
            "content":"简体中文"
          },{
            "title":"USER",
            "content":"001"
          },{
            "title":"ukey",
            "content":"001"
          },{
            "title":"机器号",
            "content":"001"
          },{
            "title":"打印机联数",
            "content":"1"
          },{
            "title":"打印制定标签",
            "content":"1"
          },{
            "title":"打印类型",
            "content":"1"
          },{
            "title":"商品名称文字大小",
            "content":"1"
          },{
            "title":"订单备注文字大小",
            "content":"1"
          },{
            "title":"头部自定义信息",
            "content":"袁家肉夹馍"
          },{
            "title":"尾部自定义信息",
            "content":"感谢您的信任"
          },{
            "title":"二维码类型",
            "content":"1"
          }]
        };
      },
      methods: {
        onSelect(item) {
          // 默认情况下点击选项时不会自动收起
          // 可以通过 close-on-click-action 属性开启自动收起
          this.show = false;
        },
        edit:function (title,placeholder) {
          this.title = title;
          this.placeholder = placeholder;
          this.show = true;
        },
        call(phone){
          // 调用拨号功能
          window.location.href = 'tel://' + phone;
        },
        submit(){
          this.$myAxios('/store/printer/edit_printer_info', 'post', {
            id:this.id,
            store_id:1,
            params:JSON.stringify(this.param)
          },0).then(res => {
            console.log(res);
            if(res.data.code == 1){
              this.$myNotice(res.data.msg,2000);
              this.$router.push({path:"/views/Business/my"})
            }
          });
        }
      },
    mounted() {
      this.$myAxios('/store/printer/printer_info', 'post', {
        store_id:1
      },0).then(res => {
        this.id = res.data.data.id;
        this.param = res.data.data.param
      });
    }
  }
</script>

<style scoped>
  .printer{
    background: #F5F5F5;
  }

  .printer input{
    border: none;
    width: 100%;
    text-align: right;
  }
  .printer input::placeholder{
    color: #A5A5A5;
  }
  >>>.van-icon-success::before{
    display: none;
  }
  >>>.van-switch{
    font-size: .24rem;
  }
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  >>>.van-button{
    font-size: .16rem;
    height: .5rem;
    line-height: .48rem;
  }
  >>>.van-picker__toolbar{
    display: none;
  }
  >>>.van-picker-column{
    font-size: .16rem;
  }
  >>>.van-picker-column__item{
    height: .44rem !important;
  }
  .printer .margin_bottom{
    margin-bottom: .05rem;
  }
  .printer .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
  .printer .title{
    font-size: .14rem;
  }
  .printer .list_once{
    background: #ffffff;
    display: flex;
    padding: .14rem .2rem;
    align-items: center;
    border-bottom: 1px solid #F1F1F3;
    justify-content: space-between;
  }
  .printer .padding_top{
    padding-top: .62rem;
  }
  .printer .content{
    flex-grow: 1;
    text-align: right;
    font-size: .13rem;
    color: #666666;
    margin-right: .04rem;
  }
  .printer .desc{
    display: flex;
    padding: .05rem .1rem;
    align-items: center;
    color: #FB4448;
    font-size: .12rem;
  }
  .printer .desc img{
    width: .13rem;
    height: .13rem;
    margin-right: .1rem;
  }
  .printer .join{
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    align-items: center;
    font-size: .14rem;
    padding: 0 .17rem;
    height: .48rem;
  }
  .printer .joinTop{
    align-items: flex-start;
    padding-top: .1rem;
  }
  .printer .join .name{
    margin-right: .16rem;
  }
  .printer .inform{
    background-color: #ffffff;
    padding: .1rem;
  }
  .printer .inform .top{
    margin-bottom: .1rem;
    font-size: .14rem;
  }
  .printer .inform .information{
    background-color: #F4F4F4;
    padding: .05rem .1rem;
    display: flex;
    align-items: flex-start;
    font-size: .13rem;
  }
  .printer .inform .information span{
    color: #FB4B4B;
    padding-top: .02rem;
  }
  .printer .inform .information textarea{
    background: none;
    border: none;
  }
  .printer .bg-color{
    background: #ffffff;
    padding: .22rem 0;
    margin-bottom: .22rem;
  }
  .printer .save{
    width: 3.4rem;
    height: .48rem;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    border-radius: .24rem;
    line-height: 0.48rem;
    text-align: center;
    margin: 0 auto;
    font-size: .15rem;
    color: #ffffff;
  }
</style>
